Skip to main content

Tech Stack

Linting and Formatting​

We use ESLint and Prettier for code linting and formatting, respectively. ESLint helps us catch bugs, bad practices, etc., during development rather than in production. Prettier allows us to format our entire codebase uniformly, simplifying code readability and team integration.

Before each commit, we automatically lint and format the code using husky and lint-staged.

Bundler​

The bundler serves the following purposes:

A module bundler provides a method for arranging and merging multiple JavaScript files into a unified single file. Using a JavaScript bundler becomes necessary when your project outgrows a single file or when dealing with libraries with numerous dependencies. As a result, the end-user's browser or client doesn't have to fetch numerous files individually.

source

After initializing this project with CRA (create-react-app), which uses the webpack bundler, we switched to Vite, which uses esbuild and rollup depending on the environment (dev or production).

This change has dramatically sped up the start time (and productivity) in dev mode.

More info

Error Handling​

Use react-error-boundary as a wrapper functional component react-error-boundary + article

Router​

Complex State Management​

UI Framework​

Different Types of Framework​

  • CSS module in React => + scoped styles
  • Preprocessor (SASS) => + nesting, mixins, functions
  • Utility class library => + unified UI | - verbose HTML code (many classes), risk with the cascade nature of CSS
  • CSS-in-JS => + style components programmatically, create dynamic styles, scopes styles
  • CSS framework (Bulma) => + prebuilt components | - large bundle size
  • Component Library (Mantine, Ant Design, MUI, Chakra)

Selection​

Form​

  • react-hook-form link

Graphs​

Table​

Notifications​

  • react-toastify link

Translation / Localization​

Real-time Bidirectional Communication​

HTTP Request​

API Interface (development tool)​

  • We use Swagger to publish available endpoints from the API and describe their types.
  • To ensure that we receive the correct data format, we validate the received data using zod, which allows inferring the type of the data at the same time (no duplication between types and schema).